<template>
  <!--轮播图-->
  <el-carousel v-if="swiperList.length" class="swiper-container" type="card" height="20vw" :interval="4000">
    <el-carousel-item v-for="(item, index) in swiperList" :key="index">
      <img :src="HttpManager.attachImageUrl(item.pic)" />
    </el-carousel-item>
  </el-carousel>
  <!--热门歌单-->
  <play-list class="play-list-container"  path="song-sheet-detail" :playList="songList"></play-list>
  <!--热门歌手-->
<!--  <play-list class="play-list-container" title="歌手列表" path="singer-detail" :playList="singerList"></play-list>-->
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";

import PlayList from "@/components/PlayList.vue";
import {  NavName } from "@/enums";
import { HttpManager } from "@/api";
import mixin from "@/mixins/mixin";

const songList = ref([]); // 响应式变量 songList，用于存储歌单列表。
const singerList = ref([]); // 响应式变量 singerList，用于存储歌手列表。
const swiperList = ref([]);// 响应式变量 swiperList，用于存储轮播图的数据。 每次都在进行查询
const { changeIndex } = mixin();
try {

  HttpManager.getBannerList().then((res) => {
    console.log('Banner API Response:', res); // 打印 API 响应数据
    swiperList.value = (res as ResponseBody).data.sort();
  });

  HttpManager.getSongList().then((res) => {
    songList.value = (res as ResponseBody).data.sort().slice(0, 70);
  });

  HttpManager.getAllSinger().then((res) => {
    singerList.value = (res as ResponseBody).data.sort().slice(0, 20);
  });

  onMounted(() => {
    changeIndex(NavName.Home);
  });
} catch (error) {
  console.error(error);
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/var.scss";

/*轮播图*/
.swiper-container {
  width: 100%;
  margin: auto;
  position: relative; // 确保轮播图容器是相对定位
  height: 330px; // 设置为固定高度
  //padding-top: 20px;
  img {
    width: 100%;
    //height: 100%; // 确保图片填满轮播图容器
    //object-fit: cover; // 确保图片不变形
  }
}

.swiper-container:deep(.el-carousel__indicators.el-carousel__indicators--outside) {
  //display: inline-block;
  //transform: translateX(30vw);
  position: absolute;
  bottom: 10px; // 指示器距离底部的距离
  left: 50%;
  transform: translateX(-50%); // 居中对齐
  display: flex;
  justify-content: center;
  width: 100%; // 确保宽度为100%，以便居中

  /* 设置指示器的容器样式 */
  //为指示器设置基本样式，包括大小、圆角、背景颜色和过渡效果。
  .el-carousel__indicator {
    margin: 0 14px;
    //width: 12px;
    //height: 12px;
    //border: 1px solid #ffffff;
    border-radius: 50%;
    background-color: $color-blue;
    //为指示器添加背景颜色和缩放的过渡效果，使其在变更时看起来更平滑。
    transition: background-color 0.3s, transform 0.3s;
  }

  //为当前活动的指示器设置样式，包括改变背景颜色和放大效果
  .el-carousel__indicator.is-active {
    background-color: $color-blue-shallow;
    //当指示器处于活动状态时，增加缩放效果，
    transform: scale(1.5);
  }
}

.el-slider__runway {
  background-color: $color-blue;
}
</style>
